<template>
	<view class="content" @touchstart="contentTouchStart">
		<!-- #ifdef  APP-PLUS -->
		<view class="bar"></view>
		<!-- #endif -->
		<view class="nav">
			<view class="nav-hide-btn" @tap="drawerShow = true">
				<text class="iconfont icon-menu"></text>
			</view>
			<view class="nav-bars">
				<view
					v-for="(item,index) in barList" 
					:key="index"
					:class="{ 'nav-bars-item-active': barCurrentIndex === index }"
					class="nav-bars-item flexCenter"
					@touchstart="navTouchStart(index)"
					@touchend="navTouchEnd"
				>
					<text class="nav-bars-item-text flexCenter">{{item}}</text>
					<view 
						class="nav-background"
						:class="{'nav-background-active': barCurrentIndex === index && isTouch }"
					></view>
				</view>
			</view>
			<view class="nav-search-btn">
				<text class="iconfont icon-search"></text>
			</view>
		</view>
		<swiper 
			class="swiper"
			:current="barCurrentIndex"
			@change="swiperChange"
		>
			<swiper-item>
				<view class="swiper-item">
					<my-mine ref="myMine" v-if="barCurrentIndex === 0 || barIndexList.some(t => t === 0)"></my-mine>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<my-find ref="myFind" v-if="barCurrentIndex === 1 || barIndexList.some(t => t === 1)"></my-find>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<my-comment ref="myComment" v-if="barCurrentIndex === 2 || barIndexList.some(t => t === 2)"></my-comment>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					4
				</view>
			</swiper-item>
		</swiper>
		
		<my-drawer :visible="drawerShow" @close="drawerShow = false">
			<my-drawer-content></my-drawer-content>
		</my-drawer>
		<my-loading></my-loading>
	</view>
</template>

<script>
	import myLoading from '../../components/my-loading/my-loading.vue';
	import myDrawer from '../../components/my-drawer/my-drawer.vue';
	import myDrawerContent from '../../components/my-drawer/myDrawerContent.vue';
	import myMine from '../../components/my-main/mine.vue';
	import myFind from '../../components/my-main/find.vue';
	import myComment from '../../components/my-main/comment.vue';
	export default {
		components: {
			myLoading, myDrawer, myDrawerContent, myMine, myFind, myComment
		},
		data() {
			return {
				barCurrentIndex: 1,
				barIndexList: [],
				barList: ['我的', '发现', '朋友', '视频'],
				isTouch: false,
				// drawer部分
				drawerShow: false,
				currentWebview: null,
			}
		},
		onLoad() {
		},
		onPullDownRefresh() {
			if (this.barCurrentIndex === 0) {
				this.$refs.myMine.update();
			} else if (this.barCurrentIndex === 1) {
				this.$refs.myFind.update();
			} else if (this.barCurrentIndex === 2) {
				this.$refs.myComment.update();
			}
		},
		methods: {
			navTouchStart(index) {
				this.barCurrentIndex = index;
				this.isTouch = true;
			},
			navTouchEnd() {
				setTimeout(() => {
					this.isTouch = false;
				}, 300);
			},
			swiperChange(e) {
				this.barCurrentIndex = e.detail.current;
				if (!this.barIndexList.some(t => t === e.detail.current)) {
					this.barIndexList.push(e.detail.current);
				}
			},
			contentTouchStart() {
				if (this.barCurrentIndex === 0) {
					uni.stopPullDownRefresh();
				}
			}
		}
	}
</script>

<style lang="scss">
	$barHeight: 120upx;
	page, .content{
		width: 100%;
		height: 100%;
	}
	.content {
		display: flex;
		flex-direction:column;
		.bar{
			width: 100%;
			height: 50upx;
			background-color: rgba(0,0,0,0.4);
		}
		.nav {
			width: 100%;
			height: $barHeight;
			display: flex;
			position: relative;
			z-index: 1000;
			background-color: #fff;
			.nav-hide-btn, .nav-search-btn{
				width: $barHeight;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.nav-bars{
				flex: 1;
				display: flex;
				overflow: hidden;
				.nav-bars-item{
					position: relative;
					flex: 1;
					.nav-background{
						position: absolute;
						top: 25%;
						bottom: 25%;
						left: 25%;
						right: 25%;
						background-color: rgba(0,0,0,0.1);
						border-radius: 50%;
						opacity: 0;
						&.nav-background-active{
							transition: all 0.3s ease;
							opacity: 1;
							transform: scale(2.5);
						}
					}
					.nav-bars-item-text{
						position: relative;
						z-index: 1;
						font-size: $uni-font-size-lg;
						color: #777;
						transition: all 0.3s ease;
					}
					&.nav-bars-item-active{
						.nav-bars-item-text{
							font-size: $uni-font-size-lger;
							color: #000;
						}
					}
				}
			}
		}
		.swiper{
			display: flex;
			flex: 1;
			background: #FFFFFF;
			.swiper-item {
				width: 100%;
				height: 100%;
			}
		}
	}

	// #ifdef  APP-PLUS
	.content{
		.swiper{
			height: calc(100% - 170upx);
		}
	}
	// #endif
</style>
